import React, { useRef, useEffect } from 'react';
import http from '@/services/request';
import * as echarts from 'echarts';

interface PieType {
  name: string;
  value: number;
}

const getQualityName = (type: string) => {
  switch(type) {
    case 'A':
      return '优质品种';
    case 'B':
      return '良好品种';
    default:
      return '一般品种';
  }
}

export default function Index() {
  const pieRefTotal = useRef<HTMLDivElement | HTMLElement | object | any>(null);
  const pieRefA = useRef<HTMLDivElement | HTMLElement | object | any>(null);
  const chickenTypeArray: PieType[] = [];
  const chickenQualityArray: PieType[] = [];
  const chickenCount = {};
  const renderPie = async () => {
    // await http.get('/hardware//henhouse/HenhouseQuery/1').then((res) => {
    //   const { data } = res;
    //   data.forEach(item => {
    //     chickenTypeArray.push({
    //       name: item['henhouse-type'],
    //       value: item['count']
    //     })
    //   })
    // });
    await http.get('/hardware//henhouse/HenhouseQuery/2').then((res) => {
      const { data } = res;
      data.forEach(item => {
        chickenQualityArray.push({
          name: getQualityName(item['henhouse-quality']),
          value: item['count']
        })
      })
    });
    await http.get('/feed/chicken/chickenInHouseFarming/list/1/30').then((res) => {
      res.data.records.forEach(item => {
        if (!chickenCount[item.chickenHouseName]) {
          chickenCount[item.chickenHouseName] = item.inQuantity;
        } else {
          chickenCount[item.chickenHouseName] += item.inQuantity;
        }
      })
      Object.keys(chickenCount).forEach(key => {
        chickenTypeArray.push({
          name: key,
          value: chickenCount[key],
        })
      })
    });
    // 总的养殖规模
    setTimeout(() => {
      echarts.init(pieRefTotal.current);
      type EChartsOption = echarts.EChartsOption;
      var chartDomTotal = document.getElementById('pie')!;
      var myChart = echarts.init(chartDomTotal);
      var option: EChartsOption;

      option = {
        title: {
          text: '养殖规模数据可视化',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '各鸡舍养殖规模，单位均为只',
            type: 'pie',
            radius: '50%',
            data: chickenTypeArray,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        toolbox: {
          show: true,
          feature: {
            dataView: {
              readOnly: false,
              title: '查看数据',
              lang: ['数据视图', '关闭', '刷新'],
              textColor: '#000',
              buttonColor: '#c23531'
            },
            restore: {
              show: true,
              title: '还原'
            },
            saveAsImage: {
              title: '导出图片',
              show: true, //是否显示该工具。
              type: 'png', //保存的图片格式。支持 'png' 和 'jpeg'。
              pixelRatio: 1 //保存图片的分辨率比例，默认跟容器相同大小，如果需要保存更高分辨率的，可以设置为大于 1 的值，例如 2
            }
          }
        }
      };

      option && myChart.setOption(option);
    }, 0);
    // A鸡舍的养殖
    setTimeout(() => {
      echarts.init(pieRefA.current);
      type EChartsOption = echarts.EChartsOption;
      var chartDomA = document.getElementById('pieA')!;
      var myChartA = echarts.init(chartDomA);
      var optionA: EChartsOption;

      optionA = {
        title: {
          text: '鸡舍的肉鸡等级分类可视化图表如下：',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '鸡舍的肉鸡等级分类',
            type: 'pie',
            radius: '50%',
            data: chickenQualityArray,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        toolbox: {
          show: true,
          feature: {
            dataView: {
              readOnly: false,
              title: '查看数据',
              lang: ['数据视图', '关闭', '刷新'],
              textColor: '#000',
              buttonColor: '#c23531'
            },
            // magicType: {
            //   show: true,
            //   type: ['line', 'bar'],
            //   title: {
            //     line: '切换为折线图',
            //     bar: '切换为柱状图'
            //   }
            // },
            restore: {
              show: true,
              title: '还原'
            },
            saveAsImage: {
              title: '导出图片',
              show: true, //是否显示该工具。
              type: 'png', //保存的图片格式。支持 'png' 和 'jpeg'。
              pixelRatio: 1 //保存图片的分辨率比例，默认跟容器相同大小，如果需要保存更高分辨率的，可以设置为大于 1 的值，例如 2
            }
          }
        }
      };

      optionA && myChartA.setOption(optionA);
    }, 0);
  };
  useEffect(() => {
    renderPie();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <>
      <div
        ref={pieRefTotal}
        id="pie"
        style={{
          height: '400px',
          marginTop: '50px',
          width: '50%'
        }}
      />
      <div
        ref={pieRefA}
        id="pieA"
        style={{
          height: '400px',
          marginTop: '50px',
          width: '50%'
        }}
      />
    </>
  );
}
